<!--  -->
<template>
    <view>
        <view class="header">
            <u-button v-if="!addressInfo" shape="circle" @click="handleAddress" plain :custom-style="customStyle">选择地址</u-button>
            <view v-else>
                <view class="address">{{address}}</view>
                <view class="user">{{user}}</view>
            </view>
        </view>
        <view class="main">
            <view class="title">已选商品</view>
            <!-- 商品部分 -->
            <view class="good-item">
                <navigator
                    v-for="item1 in cartList"
                    :key="item1.goods_id"
                    class="goods-item u-p-10"
                    :url="'/pages/goods_detail/goods_detail?goods_id='+item1.goods_id"
                >
                    <u-row>
                    <u-col span="4">
                        <view class="u-flex u-row-center">
                        <u-image
                            width="191rpx"
                            height="191rpx"
                            :src="item1.goods_small_logo"
                        ></u-image>
                        </view>
                    </u-col>
                    <u-col span="8">
                        <view
                        style="height:191rpx"
                        class="u-flex-col u-row-around"
                        >
                            <view class="goods-name">{{item1.goods_name}}</view>
                            <view class="goods-info">
                                <view class="goods-price">￥{{item1.goods_price}}</view>
                                <view class="goods-vnum">X{{item1.num}}</view>
                            </view>
                            
                        </view>
                    </u-col>
                    </u-row>
                </navigator>
            </view>
        </view>
        <!-- 底部部分 -->
        <view class="statistics">
            <view class="all-price">
            合计: <text>￥{{checkPrice}}</text>
            </view>
            <view class="all-count">
            <u-button
                type="error"
                shape="circle"
                @click="handlePay"
            >去结算({{checkCount}})</u-button>
            </view>
        </view>
    </view>
</template>

<script>
import {mapMutations,mapState,mapActions} from 'vuex'
export default {
  data () {
    return {
        customStyle:{
			color: 'red',
            width:'303rpx',
            height:'89rpx'
        },
        addressInfo:null
    };
  },
  computed:{
    ...mapState('user',['token']),
    ...mapState({
        cartList:(state)=>state.cart.cartList
    }),
    checkCount(){
        let sum=0
        this.cartList.forEach(item=>{
            if(item.checked){
            sum +=item.num
            }
        })
        return sum
    },
    checkPrice(){
        let price=0
        this.cartList.forEach(item=>{
            if(item.checked){
            price +=item.num*item.goods_price
            }
        })
        return price
    },
    address(){
        if(this.addressInfo){
            return this.addressInfo.provinceName+this.addressInfo.cityName+this.addressInfo.countyName+this.addressInfo.detailInfo
        }
    },
    user(){
        if(this.addressInfo){
            return this.addressInfo.userName+this.addressInfo.telNumber
        }
    }
  },
  methods: {
    ...mapActions('user',["fetchToken"]),
    async handleAddress(){
        const [err,res]=await uni.chooseAddress()
        console.log(62,res);
        this.addressInfo=res
    },
    async handlePay(){
        if(!this.address&&!this.user){
            uni.showToast({
                title: "请您先选择地址",
                icon: 'none'
            })
            return
        }
    //     //调用uni.getUserProfile获取用户信息和微信临时凭据来发请求换取token
    //     // 1.调用uni.getUserProfile获取用户信息
    //     const [err,{encryptedData,rawData,iv,signature}]=await uni.getUserProfile({desc:'为了更好的服务用户'})
    //     // console.log(encryptedData,rawData,iv,signature);

    //     // 2.获取微信临时凭据
    //     const [err2,{code}] = await uni.login()
    //     console.log(code);

    //     // 3 发请求获取token  后端没有写好代码！！ 正常是每一次获取都是ok！！！
    //   // 以点击两次 为准
    //     const {token} = await this.$u.http.post("/users/wxlogin",{
    //         encryptedData,rawData,iv,signature,code
    //     })
    //     console.log(token);
                
        // 3.5封装在vuex之后获取token写法
        if(!this.token){
            await this.fetchToken()
        }

        // 4.准备创建订单需要的参数
        const orderParams={
            order_price:this.checkPrice,
            consignee_addr:this.address,
            goods:this.cartList.map(item=>({
                goods_id:item.goods_id,
                goods_number:item.goods_number,
                goods_price:item.goods_price,
            }))
        }

        // 5.获取订单编号
        const {order_number}= await this.$u.http.post("/my/orders/create",orderParams)
        console.log(153,order_number);

        // 6.根据订单编号创建支付流程,获取支付参数
        const {pay} = await this.$u.http.post("/my/orders/req_unifiedorder",{order_number})
        console.log(157,pay);

        // 7.传入支付参数,调起微信支付
        const res = await uni.requestPayment(pay)
        console.log("支付订单",res);
    }
  }
}

</script>
<style lang='scss' scoped>
.header{
    width: 711rpx;
    height: 187rpx;
    background-color: #ccc;
    margin:20rpx;
    display: flex;
    align-items: center;
    justify-content: center;
}
.main{
    width: 711rpx;
    margin:20rpx;
    .title{
        height: 71rpx;
        line-height: 71rpx;
        margin-left: 26rpx;
        font-size: 26rpx;
        font-weight: 700;
    }
    .good-item{
        width: 698rpx;
        .goods-name{
            color: "#666"
        }
        .goods-info{
            display: flex;
            justify-content: space-between;
            .goods-price{
            color: $themeColor;
        }
        }
        
    }
}
.statistics {
    position: fixed;
    background-color: #fff;
    bottom: 0;
    left: 0;
    width: 100%;
    z-index: 100;
    border-top: 1rpx solid #ccc;
    display: flex;
    align-items: center;
    padding: 15rpx;

    .all-price {
      flex: 1;
      color: #666;
      text {
        color: $themeColor;
      }
    }

    .all-count {
    }
  }
</style>